<template>
  <el-dialog title="选择活动" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <div class="content" @click.stop="()=>{}">
      <el-form label-position="left" label-width="100px" style="width: 100%; padding-left: 20px;">
        <el-form-item label="所选活动：" v-if="config.count !== 1">
          <div class="el-tag-box">
            <el-tag v-for="(item, index) of result" :key="item.id" :closable="true" @close="delItem(index)">{{item.title}}</el-tag>
          </div>
        </el-form-item>
      </el-form>
      <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="100px" style="width: 100%">
        <input type="text" style="display: none"/><!--form input placeholder-->
        <el-row>
          <el-col>
            <el-form-item label="活动名称：" prop="title">
              <el-input @keyup.enter.native="search" v-model="listQuery.title" placeholder="按活动名称搜索" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" class="btn-item">
          <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
        <el-table-column align="center" width="50">
          <template slot-scope="scope">
            <label class="input-radio" v-if="config.count === 1">
              <input type="radio" :value="{id: scope.row.id}" v-model="itemsRadio" @change="(e) => setValue(e.target.checked, scope.row)"/>
              <span></span>
            </label>
            <label class="input-checkbox" v-else>
              <input type="checkbox" :value="{id: scope.row.id}" v-model="itemsCheck" @change="(e) => setValue(e.target.checked, scope.row)"/>
              <span></span>
            </label>
          </template>
        </el-table-column>
        <el-table-column align="center" label="活动标题" min-width="110">
          <template slot-scope="scope">
              <p v-text="scope.row.title"></p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="活动ID" prop="startTime">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-size="listQuery.pageSize"
        background
        layout="total, prev, pager, next, jumper"
        style="text-align: center"
        :total="listTotal">
      </el-pagination>
    </div>
    <div slot="footer" class="dialog-footer" @click.stop="()=>{}">
      <el-button type="primary" :loading="btnLoading" @click="choose">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    name: 'activity-list',
    props: {
      config: { type: Object, default(){ return {} } },
      selected: { type: Array, default(){ return [] } },
    },
    data(){
      return {
        dialogVisible: true,
        btnLoading: false,
        result: this.selected,
        itemsCheck: this.selected.length ? this.selected.map(item => { return { id: item.id }}): [],
        itemsRadio: this.selected.length ? {id: this.selected[0].id} : {},

        listQuery: {
          pageNo: 1,
          pageSize: 10,
          type:1
        },
        list: [],
        listTotal: 0,
        listLoading: false
      }
    },
    created(){
      this.getList()
    },
    methods: {
      // 获取列表
      getList() {
        console.log(this.listQuery)
        this.listLoading = true;
        this.request({
          url: '/promotion',
          method: 'get',
          params: this.listQuery
        }).then(({data}) => {
          this.list = data.records;
          this.listTotal = data.total;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      // 搜索
      search() {
        this.listQuery.pageNo = 1;
        this.getList();
      },
      // 切换分页
      handleCurrentChange(page) {
        this.listQuery.pageNo = page;
        this.getList();
      },
      // 选择change
      setValue(checked, row){
        if(checked){
          if(this.config.count ===1 ){
            this.result = [row]
          } else {
            this.result.push({ ...row });
          }
        } else {
          let index = this.itemsCheck.findIndex(item => row.id === item.id);
          this.result.splice(index, 1);
        }
      },
      // 单击行
      clickRow(row) {
        if (this.config.count === 1) {
          this.itemsRadio = { id: row.id };
          this.result = [row];
        } else {
          let index = this.itemsCheck.findIndex(item => row.id === item.id);
          if (index < 0){
            this.itemsCheck.push({ id: row.id });
            this.result.push({ ...row });
          } else {
            this.itemsCheck.splice(index, 1);
            this.result.splice(index, 1);
          }
        }
      },
      // 通过tag删除
      delItem(index) {
        this.itemsCheck.splice(index, 1);
        this.result.splice(index, 1);
      },
      // 关闭弹窗
      close(){
        this.dialogVisible = false;
        document.body.removeChild(this.$el);
      },
      // 选完，点击确定
      choose(){
        if(this.result.length < 1){
          return this.$message.error('请选择活动');
        }
        if(this.config.count > 0 && this.itemsCheck.length > this.config.count){
          return this.$message.error(`最多选择${this.config.count}个活动`);
        }
        this.$emit('choose', this.result);
        this.close();
      }
    }
  }
</script>
